<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=375, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>忆小宝 - 记忆助手原型</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        'warm-orange': '#FF8A65',
                        'soft-orange': '#FFB74D',
                        'light-orange': '#FFF3E0',
                        'warm-gray': '#F5F5F5'
                    }
                }
            }
        }
    </script>
</head>
<body class="bg-warm-gray min-h-screen flex flex-col items-center justify-center">
    <!-- 启动页 -->
    <div id="splash" class="w-[375px] h-screen flex flex-col items-center justify-center gradient-bg text-white absolute top-0 left-1/2 -translate-x-1/2 z-50">
        <img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=120&h=120&fit=crop" class="w-24 h-24 rounded-full mb-6 shadow-lg" alt="logo">
        <h1 class="text-4xl font-bold mb-2 tracking-wider">忆小宝</h1>
        <p class="text-lg mb-8 opacity-90">让记忆更温暖</p>
        <div class="flex items-center space-x-3 text-lg opacity-80">
            <i class="fas fa-heart animate-pulse"></i>
            <span>关爱每一天</span>
        </div>
    </div>

    <!-- 主界面容器 -->
    <div id="main" class="w-[375px] mx-auto bg-white rounded-2xl shadow-xl overflow-hidden relative" style="display:none;">
        <!-- 顶部栏 -->
        <div class="gradient-bg p-4 pt-10 flex items-center justify-between">
            <div class="text-xl font-bold text-white flex items-center">
                <i class="fas fa-brain mr-2"></i>忆小宝
            </div>
            <button id="btn-settings" class="text-white text-2xl"><i class="fas fa-cog"></i></button>
        </div>
        <!-- 首页 -->
        <div id="home" class="p-6 bg-light-orange min-h-[calc(100vh-80px)]">
            <div class="text-center mb-6">
                <h2 class="text-2xl font-bold text-gray-800 mb-1">您好，张奶奶</h2>
                <p class="text-base text-gray-600">今天是2024年1月15日 星期一</p>
            </div>
            <!-- 今日提醒 -->
            <div class="bg-white rounded-2xl p-4 card-shadow mb-6">
                <h3 class="text-lg font-bold text-gray-800 mb-3 flex items-center">
                    <i class="fas fa-star text-warm-orange mr-2"></i>今日重要提醒
                </h3>
                <div class="flex items-center">
                    <i class="fas fa-pills text-warm-orange text-2xl mr-3"></i>
                    <div>
                        <p class="font-semibold text-gray-800">记得吃降压药</p>
                        <p class="text-sm text-gray-600">上午9:00 - 还有30分钟</p>
                    </div>
                </div>
            </div>
            <!-- 功能入口 -->
            <div class="grid grid-cols-2 gap-4 mb-6">
                <button onclick="showScreen('memory')" class="bg-white rounded-2xl p-6 card-shadow text-center w-full flex flex-col items-center hover:bg-warm-orange hover:bg-opacity-10 transition">
                    <i class="fas fa-clipboard-list text-4xl text-warm-orange mb-2"></i>
                    <span class="font-bold text-gray-800 text-lg">黄金记忆板</span>
                    <span class="text-sm text-gray-600 mt-1">重要事项提醒</span>
                </button>
                <button onclick="showScreen('item')" class="bg-white rounded-2xl p-6 card-shadow text-center w-full flex flex-col items-center hover:bg-warm-orange hover:bg-opacity-10 transition">
                    <i class="fas fa-camera text-4xl text-warm-orange mb-2"></i>
                    <span class="font-bold text-gray-800 text-lg">记住这东西</span>
                    <span class="text-sm text-gray-600 mt-1">物品位置记录</span>
                </button>
            </div>
        </div>
        <!-- 黄金记忆板 -->
        <div id="memory" class="hidden p-6 bg-light-orange min-h-[calc(100vh-80px)]">
            <div class="flex items-center justify-between mb-4">
                <button onclick="showScreen('home')" class="text-warm-orange text-2xl"><i class="fas fa-arrow-left"></i></button>
                <h2 class="text-xl font-bold text-gray-800">黄金记忆板</h2>
                <button class="text-warm-orange text-2xl"><i class="fas fa-plus"></i></button>
            </div>
            <div class="space-y-4">
                <div class="bg-white rounded-2xl p-4 card-shadow flex items-start">
                    <img src="https://images.unsplash.com/photo-1584308666744-24d5c474f2ae?w=60&h=60&fit=crop&crop=center" class="w-16 h-16 rounded-xl object-cover mr-4">
                    <div class="flex-1">
                        <h4 class="font-bold text-gray-800 text-lg mb-1">记得吃降压药</h4>
                        <p class="text-gray-600 mb-2">每天上午9点，饭后半小时服用</p>
                        <div class="flex items-center justify-between">
                            <span class="text-sm text-warm-orange bg-warm-orange bg-opacity-10 px-3 py-1 rounded-full"><i class="fas fa-clock mr-1"></i>09:00</span>
                            <button class="bg-green-500 text-white px-4 py-2 rounded-full text-sm"><i class="fas fa-check mr-1"></i>已完成</button>
                        </div>
                    </div>
                </div>
                <div class="bg-white rounded-2xl p-4 card-shadow flex items-start">
                    <img src="https://images.unsplash.com/photo-1551218808-94e220e084d2?w=60&h=60&fit=crop&crop=center" class="w-16 h-16 rounded-xl object-cover mr-4">
                    <div class="flex-1">
                        <h4 class="font-bold text-gray-800 text-lg mb-1">下午看医生</h4>
                        <p class="text-gray-600 mb-2">心内科复查，记得带上病历本</p>
                        <div class="flex items-center justify-between">
                            <span class="text-sm text-warm-orange bg-warm-orange bg-opacity-10 px-3 py-1 rounded-full"><i class="fas fa-clock mr-1"></i>14:30</span>
                            <button class="bg-warm-orange text-white px-4 py-2 rounded-full text-sm"><i class="fas fa-bell mr-1"></i>提醒我</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="mt-6 flex space-x-3">
                <button class="flex-1 bg-warm-orange text-white py-3 rounded-xl font-semibold flex items-center justify-center"><i class="fas fa-microphone mr-2"></i>语音添加</button>
                <button class="flex-1 bg-gray-100 text-gray-700 py-3 rounded-xl font-semibold flex items-center justify-center"><i class="fas fa-camera mr-2"></i>拍照添加</button>
            </div>
        </div>
        <!-- 记住这东西 -->
        <div id="item" class="hidden p-6 bg-light-orange min-h-[calc(100vh-80px)]">
            <div class="flex items-center justify-between mb-4">
                <button onclick="showScreen('home')" class="text-warm-orange text-2xl"><i class="fas fa-arrow-left"></i></button>
                <h2 class="text-xl font-bold text-gray-800">记住这东西</h2>
                <button class="text-warm-orange text-2xl"><i class="fas fa-search"></i></button>
            </div>
            <div class="bg-white rounded-2xl p-6 card-shadow mb-6 text-center">
                <div class="w-16 h-16 bg-warm-orange bg-opacity-20 rounded-full flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-camera text-warm-orange text-2xl"></i>
                </div>
                <h3 class="text-lg font-bold text-gray-800 mb-2">拍照记录物品</h3>
                <p class="text-gray-600 mb-4">拍下物品照片，我来帮您记住它在哪里</p>
                <button class="bg-warm-orange text-white px-6 py-3 rounded-xl font-semibold"><i class="fas fa-camera mr-2"></i>开始拍照</button>
            </div>
            <h3 class="text-lg font-bold text-gray-800 mb-3">最近记录</h3>
            <div class="space-y-3">
                <!-- 物品卡片，后续可点击进入详情页 -->
                <div class="bg-white rounded-2xl p-4 card-shadow flex items-start cursor-pointer" title="点击查看详情">
                    <img src="https://images.unsplash.com/photo-1553062407-98eeb64c6a62?w=80&h=80&fit=crop&crop=center" class="w-20 h-20 rounded-xl object-cover mr-4">
                    <div class="flex-1">
                        <h4 class="font-bold text-gray-800 text-lg mb-1">老花镜</h4>
                        <p class="text-gray-600 mb-2">放在客厅茶几上</p>
                        <div class="flex items-center justify-between">
                            <span class="text-sm text-gray-500">2小时前</span>
                            <button class="bg-green-100 text-green-600 px-3 py-1 rounded-full text-sm"><i class="fas fa-check mr-1"></i>已找到</button>
                        </div>
                    </div>
                </div>
                <div class="bg-white rounded-2xl p-4 card-shadow flex items-start cursor-pointer" title="点击查看详情">
                    <img src="https://images.unsplash.com/photo-1584464491033-06628f3a6b7b?w=80&h=80&fit=crop&crop=center" class="w-20 h-20 rounded-xl object-cover mr-4">
                    <div class="flex-1">
                        <h4 class="font-bold text-gray-800 text-lg mb-1">钥匙</h4>
                        <p class="text-gray-600 mb-2">放在玄关鞋柜上的小盒子里</p>
                        <div class="flex items-center justify-between">
                            <span class="text-sm text-gray-500">昨天</span>
                            <button class="bg-warm-orange text-white px-3 py-1 rounded-full text-sm"><i class="fas fa-map-marker-alt mr-1"></i>查看位置</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="mt-6">
                <h3 class="text-lg font-bold text-gray-800 mb-3">按类别查看</h3>
                <div class="grid grid-cols-3 gap-3">
                    <div class="bg-white rounded-xl p-4 text-center card-shadow">
                        <i class="fas fa-glasses text-2xl text-blue-500 mb-2"></i>
                        <p class="text-sm font-semibold text-gray-800">日用品</p>
                        <p class="text-xs text-gray-500">12件</p>
                    </div>
                    <div class="bg-white rounded-xl p-4 text-center card-shadow">
                        <i class="fas fa-pills text-2xl text-green-500 mb-2"></i>
                        <p class="text-sm font-semibold text-gray-800">药品</p>
                        <p class="text-xs text-gray-500">5件</p>
                    </div>
                    <div class="bg-white rounded-xl p-4 text-center card-shadow">
                        <i class="fas fa-key text-2xl text-warm-orange mb-2"></i>
                        <p class="text-sm font-semibold text-gray-800">重要物品</p>
                        <p class="text-xs text-gray-500">8件</p>
                    </div>
                </div>
            </div>
            <div class="mt-6 flex space-x-3">
                <button class="flex-1 bg-warm-orange text-white py-3 rounded-xl font-semibold flex items-center justify-center"><i class="fas fa-camera mr-2"></i>拍照记录</button>
                <button class="flex-1 bg-gray-100 text-gray-700 py-3 rounded-xl font-semibold flex items-center justify-center"><i class="fas fa-microphone mr-2"></i>语音记录</button>
            </div>
        </div>
        <!-- 去除底部tabbar，保留首页入口 -->
    </div>
    <script>
        // 启动页3秒后自动进入首页
        setTimeout(function(){
            document.getElementById('splash').style.display = 'none';
            document.getElementById('main').style.display = 'block';
        }, 2000);
        // 页面切换
        function showScreen(screen) {
            document.getElementById('home').classList.add('hidden');
            document.getElementById('memory').classList.add('hidden');
            document.getElementById('item').classList.add('hidden');
            document.getElementById(screen).classList.remove('hidden');
        }
        // 设置按钮跳转（可扩展）
        document.getElementById('btn-settings').onclick = function(){alert('个人中心/设置（原型）')}
    </script>
    <style>
        .gradient-bg {
            background: linear-gradient(135deg, #FF8A65 0%, #FFB74D 100%);
        }
        .card-shadow {
            box-shadow: 0 4px 12px rgba(255, 138, 101, 0.12);
        }
    </style>
</body>
</html> 